
// 封装获取元素函数
function $(el){
    return document.querySelector(el)
}

// 封装获取随机数函数
function randomNum(min,max){
   return Math.floor(Math.random()*(max-min+1)+min )
}

// 封装伪数组转数组函数
// function gets(el){
//     return [...document.querySelectorAll(el)]
// }

function gets(el){
    return [...document.querySelectorAll(el)]
}

// 封装获取元素内容个数函数
function dataFn(num){
    var arr = []
    while(arr.length<num){
        var index = randomNum(0,dataAll.length-1)
        if(arr.indexOf(dataAll[index])===-1) {
            arr.push(dataAll[index])
        }
    }
    return arr
}

// render()

// // 封装渲染函数
// function render(){
//     var data = dataFn(randomNum(15,30))
//     $('.allTag').innerHTML= data.map(function(item){
//         return `<li>${item}</li>`
//     }).join('')
// }




var dataAll = ['互联网','移动互联网','it','电子商务','广告','网络编辑',
            '产品经理','程序员','网管','文案策划','java工程师','php工程师','dreamweaver',
            'photoshop','公文写作','70后','80后','加班狂','java','教程','SEM','SEM基础',
            '柚说','关键词','创意','公众号','排名','网络营销','SEM','网络推广','达内',
            '效果','数据','SEO','DSP','百度网盟','百度DSP','广点通','智慧推','粉丝通',
            '新媒体','微信','微博','问答','百科','博客','ASO','网站','着陆页','网站分析','电商'
        ]


var data = dataFn(randomNum(15,20))
$('.allTag').innerHTML= data.map(function(item){
        return `<li>${item}</li>`
    }).join('')
// 给换一换设置点击事件
$('.change span').onclick = function(){
    var data = dataFn(randomNum(15,20))
    $('.allTag').innerHTML= data.map(function(item){
            return `<li>${item}</li>`
        }).join('')
}


// 给span绑定点击事件
gets('.tagColor span').forEach(function(item){
    item.onclick= function(){
        gets('.color').forEach(function(obj){
            obj.style.color=getComputedStyle(item).backgroundColor
        })
    }
})

// 给展开标签库绑定点击事件
$('.taggleBtn').onclick = function(){
    if($('.taggleBtn').innerHTML==='展开标签库'){
        $('.taggleBtn').innerHTML='收起标签库'
        $('.footer').classList.add('show')
    }else{
        $('.taggleBtn').innerHTML='展开标签库'
        $('.footer').classList.remove('show')
    }  
}

// 给allTag下的 li 绑定点击事件
gets('.allTag li').forEach(function(item){
    item.onclick=function(){
        if(item.classList.contains('selected')){
            item.classList.remove('selected')
            gets(".myTag li").forEach(function(mLi){
                if(mLi.innerHTML === item.innerHTML){
                     mLi.remove()
                }
            })
        }else{
            var li = document.createElement('li')
            li.innerHTML = item.innerHTML
             li.classList.add('color')
             item.classList.add('selected')
            $(".myTag").appendChild(li)    
        }
    }     
})